<template>
	<view style="overflow-y: auto;">
		<view class="bodys">
			<u-swiper @click="preview" name='image' border-radius='1' :duration='duration' :interval='interval' :height="height"
				:list="swipperList">
			</u-swiper>
			<!-- <img @click="preview" :src="swipperList" alt="" style="width: 100%; height: 200px; -o-object-fit: contain;" /> -->
			<view class="header">
				<view class="title">
					{{goodsName}}
				</view>
				<view class="price">
					￥{{goodsPrice}}
				</view>
			</view>
			<view class="info-fa">
				<view class="fa-left"></view>
				<view class="goodsInfo">
					物品简介
				</view>
			</view>
			<view class="info">
				<view class="title-desc">
					{{goodsDesc}}
				</view>
			</view>
			<view class="info-fa">
				<view class="fa-left"></view>
				<view class="goodsInfo">
					物品位置
				</view>
			</view>
			<view class="info">
				<view class="title-desc">
					{{address}}
				</view>
			</view>
			<view class="info-fa">
				<view class="fa-left"></view>
				<view class="goodsInfo">
					交易流程
				</view>
			</view>
			<view class="info">
				<u-steps active-color="#FF7670" style="width: 100%;" mode="number" :list="numlist" :current="4"></u-steps>
			</view>
			<view class="info-fa">
				<view class="fa-left"></view>
				<view class="goodsInfo">
					交易方式
				</view>
			</view>
			<view class="info">
				<view class="title-desc">
					自行协商.自提|送货上门|约定交易点|当面验货交易
				</view>
			</view>
			<view class="info-fa">
				<view class="fa-left"></view>
				<view class="goodsInfo">
					发布时间
				</view>
			</view>
			<view class="info">
				<view class="title-desc">
					{{createTime}}
				</view>
			</view>
			<view class="info-fa">
				<view class="fa-left"></view>
				<view class="goodsInfo">
					联系方式
				</view>
			</view>
			<view class="useinfo">
				<view class="title-desc">
					电话:{{phone}}
				</view>
				<view class="title-desc">
					微信:{{wxNum}}
				</view>
			</view>
		</view>
		<!-- 评论 -->
		<view class="review">
			<view class="review_top">
				全部评论 {{commentCount}}
			</view>
			<template class="review_contain" v-for="(item,index) in GoodsComment" :key="index">
				<!-- 主评论 -->
				<view class="boss_review" v-if="item.replyId == 0" >
					<!-- 用户名 -->
					<view class="user_title" @click="showSay(item)">
						<img class="imgs" :src="item.userPicture" alt="" />
						<view class="title_right">
							<view class="user_name">
								{{item.nickName}}
							</view>
							<view class="user_date">
								{{item.createDate}}
							</view>
						</view>
					</view>
					<view class="user_contain">
						<view class="user_review">
							<view class="user_say">
								{{item.content}}
							</view>
							<!-- 回复评论 -->
							<template class="bosee_review" v-for="(items,index) in GoodsComment" :key="index">
								<template class="box_review" v-if="items.replyId == item.id">
									<view class="user_title">
											<img class="imgs" :src="items.userPicture" alt="" />
										<view class="title_right">
											<view class="user_name">
												{{items.nickName}}
											</view>
											<view class="user_date">
												{{items.createDate}}
											</view>
										</view>
									</view>
									<view class="user_contain">
										<view class="user_review">
											<view class="user_say">
												{{items.content}}
											</view>
										</view>
									</view>
								</template>
							</template>
						</view>
					</view>
				</view>
			</template>
		</view>
		<view class="navigation">
			<view class="left">
				<view @click="toHome" class="item">
					<u-icon name="home" :size="40"></u-icon>
					<view class="text u-line-1">首页</view>
				</view>
				<view @click="collectBtn" class="item">
					<u-icon v-if="hasStatus == '0'" :size="40" name="star"></u-icon>
					<u-icon v-if="hasStatus == '1'" color="#FF7670" :size="40" name="star"></u-icon>
					<view v-if="hasStatus == '0'" class="text u-line-1">收藏</view>
					<view v-if="hasStatus == '1'" style="color:#FF7670" class="text u-line-1">收藏</view>
				</view>
				<view @click="toRepory" class="item car">
					<u-icon v-if="hasReportStatus == '0'" name="info-circle" :size="40"></u-icon>
					<u-icon v-if="hasReportStatus == '1'" style="color:#F3AF28" name="info-circle" :size="40"></u-icon>
					<view v-if="hasReportStatus == '0'" class="text u-line-1">举报</view>
					<view v-if="hasReportStatus == '1'" style="color:#F3AF28" class="text u-line-1">举报</view>
				</view>
				<view class="item"  @click="showSay()">
					<u-icon :size="40" name="edit-pen"></u-icon>
					<view class="text u-line-1">评论</view>
				</view>
			</view>
			<view class="right">
				<view @click="callPhone" class="cart btn u-line-1">电话咨询</view>
				<view @click="toBuy" class="buy btn u-line-1">立即交易</view>
			</view>
		</view>
		<!-- 立即交易 -->
		<u-popup :mask-close-able="false" border-radius="15" width="85%" height="200px" v-model="show" mode="center">
			<view style="padding: 50px 15px 30px 15px;">
				<u-form label-width="auto" :model="addModel" ref="form1">
					<u-form-item label="请输入交易金额" prop="price"><u-input v-model="addModel.price" /></u-form-item>
				</u-form>
			</view>
			<view class="conBtn">
				<u-button @click="cancel" style="margin-right: 15px;" type="info">取消交易</u-button>
				<u-button @click="confirm" style="margin-left: 15px;" :custom-style="customStyle" type="error">确定交易</u-button>
			</view>
		</u-popup>
		<!-- 举报 -->
		<u-popup :mask-close-able="false" border-radius="15" width="85%" height="200px" v-model="reportShow" mode="center">
			<view style="padding: 50px 15px 30px 15px;">
				<u-form label-width="auto" :model="reportModel" ref="form1">
					<u-form-item label="请输入举报原因" prop="reason"><u-input v-model="reportModel.reason" /></u-form-item>
				</u-form>
			</view>
			<view class="conBtn">
				<u-button @click="reportCancel" style="margin-right: 15px;" type="info">取消举报</u-button>
				<u-button @click="reportConfirm" style="margin-left: 15px;" :custom-style="customStyle" type="error">确定举报</u-button>
			</view>
		</u-popup>
		<!-- 评论 -->
		<u-popup v-model="shows" mode="bottom" height="200px" border-radius="15" @close="close" @open="open">
			   <view class="showtitle">
					<view class="showInput">
					<u-input :cursor-spacing="20"  v-model="values" :placeholder="placegolderInput" style="font-size: 24px; position: fixed; left: 20rpx; right: 210rpx; top: 30rpx;  background-color:rgba(0,0,0,0.06); border-radius: 50rpx; padding: 15rpx 30rpx; 0 30rpx;" type="textarea"  height="45" focus="true" auto-height="true"  />
					</view>
					<view class="send" @click="sendSaid()">
						发 送
					</view>
			   </view>
		</u-popup>
	</view>
</template>

<script setup>
	import {
		onLoad
	} from '@dcloudio/uni-app';
	import {
		reactive,
		ref
	} from 'vue';
	import {replaceOrderApi} from '../../api/order.js'
	import {collectApi,hasCollectApi,reportApi,hasReportApi,getGoodsCommentApi, addGoodsCommentApi} from '../../api/unused.js'
	const customStyle = reactive({
		background:'#FF7670'
	})
	//轮播图高度
	const height = ref('350')
	//是否显示面板指示点
	const indicatorDots = ref(true)
	//是否自动播放
	const autoplay = ref(true)
	//自动切换时间间隔
	const interval = ref(2000)
	//滑动动画时长
	const duration = ref(500)
	const swipperList = ref([])
	const numlist = ref([{
		name: '发布信息'
	}, {
		name: '电话/微信沟通'
	}, {
		name: '当面交易'
	}, {
		name: '交易完成'
	}])
	const goodsId = ref('')
	//名称
	const goodsName = ref('')
	//价格
	const goodsPrice = ref('')
	//简介
	const goodsDesc = ref('')
	//位置
	const address = ref('')
	const wxNum = ref('')
	const phone = ref('')
	//发布时间
	const createTime = ref('')
	//跳转首页
	const toHome = ()=>{
		uni.switchTab({
			url:"../index/index"
		})
	}
	// 图片预览
	const preview = () => {
      uni.previewImage({
        urls: swipperList.value, // 需要预览的图片链接列表
      });
	  console.log(swipperList.value)
    }

	// 评论弹窗
	// 回复对象id
	const replyId = ref(0)
	const shows = ref(false)
	const values = ref()
	const showSay = (item)=> {
		shows.value = true
		if(item){
			replyId.value = item.id
			console.log(replyId.value)
			placegolderInput.value = '回复 '+item.nickName+'：'
			console.log('123',show.value)
		}else{
			placegolderInput.value = '说说你的看法...'
		}
	}
	// 发布评论
	const sendSaid = async() => {
		const userId = uni.getStorageSync('userId');
		console.log(replyId.value)
		const res = await addGoodsCommentApi({'content':values.value,'userId':userId,'goodId':goodssId.value,'replyId':replyId.value})
		if(res.code == 200){
			console.log('发布成功')
			getCommentList()
			shows.value = false
			values.value = ''
		}
	}
	const GoodsComment = ref()
	const goodssId = ref()
	// 评论数
	const commentCount = ref()
	// 获取评论列表
	const getCommentList = async() => {
		const Comment = await getGoodsCommentApi(goodssId.value)
		commentCount.value = Comment.data.commentCount
		GoodsComment.value = Comment.data.commentList
		console.log(GoodsComment.value)
	}
	//电话咨询
	const callPhone = ()=>{
		uni.makePhoneCall({
			phoneNumber:phone.value,
			success:(res)=>{},
			fail: (res) => {
				
			}
		})
	}
	//商品创建人的id
	const creatUser = ref('')
	//立即交易按钮
	const show = ref(false)
	const toBuy = ()=>{
		show.value = true;
	}
	const addModel = reactive({
		price:"",
		goodsId:"",
		orderUser:uni.getStorageSync("userId")
	})
	//交易取消
	const cancel = ()=>{
		show.value = false;
	}
	//交易确定
	const confirm = async()=>{
		//是否填写金额
		if(!addModel.price){
			uni.showToast({
				title:'请填写交易金额',
				icon:"none",
				mask:true,
				duration:3000
			})
			return;
		}
		if(creatUser.value == addModel.orderUser){
			uni.showToast({
				title:'不能交易自己发布的商品！',
				icon:"none",
				mask:true,
				duration:3000
			})
			return;
		}
		let res = await replaceOrderApi(addModel)
		if(res && res.code == 200){
			uni.navigateTo({
				url:"../my_order/my_order"
			})
			show.value = false;
		}
		
	}
	
	//举报按钮
	const reportShow = ref(false)
	const toRepory = ()=>{
		reportShow.value = true;
	}
	const reportModel = reactive({
		reason:"",
		goodsId:'',
		reportUser:uni.getStorageSync("userId")
	})
	//取消举报
	const reportCancel = ()=>{
		reportShow.value = false;
	}
	//确定举报
	const reportConfirm = async()=>{
		if(!reportModel.reason){
			uni.showToast({
				title:'请填写举报原因',
				icon:"none",
				mask:true,
				duration:3000
			})
			return;
		}
		reportModel.goodsId = goodsId.value
		let res = await reportApi(reportModel)
		if(res &&res.code == 200){
			console.log(res)
			hasReport()
			reportShow.value = false;
		}
	}
	//查询是否举报
	const hasReportStatus = ref('0')
	const hasReport = async()=>{
		let res =await hasReportApi({
			goodsId:goodsId.value,
			userId:uni.getStorageSync("userId")
		})
		if(res && res.code == 200){
			hasReportStatus.value = res.data;
		}
	}
	//收藏按钮
	const collectBtn = async()=>{
		let res = await collectApi({
			userId:uni.getStorageSync("userId"),
			goodsId:goodsId.value
		})
		if(res && res.code == 200){
			console.log(res)
			hasCollect()
		}
	}
	//查询是否收藏
	const hasStatus = ref('0')
	const hasCollect = async()=>{
		let res = await hasCollectApi({
			userId:uni.getStorageSync("userId"),
			goodsId:goodsId.value
		})
		if(res && res.code == 200){
			console.log(res)
			hasStatus.value = res.data
		}
	}
	onLoad((options) => {
		const goods = JSON.parse(options.goods)
		console.log(goods)
		goodsId.value = goods.goodsId;
		addModel.goodsId = goods.goodsId;
		creatUser.value = goods.userId;
		//物品的图片:轮播图数据
		if (goods.image) {
			swipperList.value = goods.image.split(",");
		}
		goodsName.value = goods.goodsName;
		goodsDesc.value = goods.goodsDesc;
		address.value = goods.address;
		goodsPrice.value = goods.goodsPrice
		createTime.value = goods.createTime
		phone.value = goods.phone
		wxNum.value = goods.wxNum
		goodssId.value = goods.goodsId;
		//查询是否收藏
		hasCollect()
		//是否举报
		hasReport()
		// 获取评论列表
		getCommentList()
	})
</script>

<style lang="scss">
	body{
		background-color: rgb(240, 240, 240);
	}
	.bodys{
		background-color: #fff;
		// border-radius: 0 0 10px 10px;
		padding-bottom:10px ;
	}
	.conBtn{
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.header {
		display: flex;
	}

	.title {
		color: #303133;
		font-weight: bold;
		padding: 20rpx;
		font-size: 30rpx;
	}

	.price {
		color: #FF7670;
		padding: 20rpx;
		font-size: 30rpx;
	}

	.info-fa {
		display: flex;
		align-items: center;
	}

	.fa-left {
		width: 1px;
		height: 12px;
		border-left: 3px solid #FF7670;
		margin-left: 10px;
	}

	.goodsInfo {
		padding: 5px;
		color: #F3AF28;
	}

	.info {
		display: flex;
		align-items: center;
		background-color: #FFF;
		margin-bottom: 25px;
		padding: 0px 20px;
	}

	.useinfo {
		display: flex;
		flex-direction: column;
		margin-left: 20px;
		margin-bottom: 80px;
	}
.review{
		margin-bottom: 80px;
		margin-top: 10px;
		background-color: #fff;
		padding: 10px;
		.review_top{
			font-size: 18px;
			font-weight: 800;
			margin-bottom: 40rpx;
		}
		.review_contain{
			padding-top: 20px;
			
		}
		.boss_review{
			.user_title{
				display: flex;
				.imgs{
					width: 36px;
					height:  36px;
					border-radius: 18px;
				}
				.title_right{
					padding-left: 10px;
					.user_name{
						font-size: 14px;
						margin-bottom: 3px;
						color: #989898;
					}
					.user_date{
						font-size: 11px;
						color: #989898;
					}
				}
			}
			.user_contain{
				padding:10px 0 4px 40px;
				.user_say{
					font-size: 16px;
					margin-bottom: 10px;
				}
				.bosee_review{
					background-color:rgba(0,0,0,0.03);
					padding: 10px;
					border-radius: 5px;
					.imgs{
						width: 30px;
						height:  30px;
						border-radius: 15px;
					}
				}
			}
		}
	}
	.navigation {
		display: flex;
		margin-top: 100rpx;
		border: solid 2rpx #f2f2f2;
		background-color: #ffffff;
		padding: 16rpx 0;
		position: fixed;
		width: 100%;
		bottom: 0;

		.left {
			display: flex;
			font-size: 20rpx;

			.item {
				margin: 0 20rpx;

				&.car {
					text-align: center;
					position: relative;

					.car-num {
						position: absolute;
						top: -10rpx;
						right: -10rpx;
					}
				}
			}
		}

		.right {
			display: flex;
			font-size: 28rpx;
			align-items: center;

			.btn {
				line-height: 66rpx;
				padding: 0 30rpx;
				border-radius: 36rpx;
				color: #ffffff;
			}

			.cart {
				background-color: #FF7670;
				margin-right: 30rpx;
			}

			.buy {
				background-color: #F3AF28;
			}
		}
	}
	.showtitle{
		display: flex;
		// justify-content: space-between;
	}
	.showInput{
		// background-color:rgba(0,0,0,0.06);
		margin: 20px 0 20px 20px;
		width: 550rpx;
		height: 90rpx;
		border-radius: 50rpx;
		display: flex;
		justify-content: center; /* 水平居中 */
		align-items: center;     /* 垂直居中 */
	}
	.send{
		background-color: #ffef08;
		width: 170rpx;
		height: 85rpx;
		border-radius: 50rpx;
		margin: 35rpx 20rpx 20rpx 20rpx;
		display: flex;
		justify-content: center; /* 水平居中 */
		align-items: center;     /* 垂直居中 */
		font-size: 22px;
		font-weight: 600;
		
	}
</style>
